<script type="text/javascript" src="mustache.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<body>
  <script src="monaco-editor/min/vs/loader.js"></script>
  <div>
    <div style="width: 58%;float:left;">
      <div id="container" style="width:100%;height:800px;border:1px solid grey"></div>
    </div>
    <div style="width: 40%;float:left;">
     <div id="modelcontainer" style="width:100%;height:400px;border:1px solid grey"></div>
      <div id="tplcontainer" style="width:100%;height:400px;border:1px solid grey"></div>
    </div>
    <div style="float:clear;"></div>
  </div>
  
  
  <script>
    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
    var editor;
    var modeleditor;
    var tpleditor;
    require(['vs/editor/editor.main'], function() {
      editor = monaco.editor.create(document.getElementById('container'), {
        value: '',
        language: 'html'
      });
      modeleditor = monaco.editor.create(document.getElementById('modelcontainer'), {
        value: '',
        language: 'javascript'
      });
      tpleditor = monaco.editor.create(document.getElementById('tplcontainer'), {
        value: '',
        language: 'html'
      });
      modeleditor.setValue($("#codetpl").html());
      tpleditor.setValue(tplLayForm);
      setValue();
      modeleditor.onDidChangeModelContent((e) => { 
        //console.log(e)  
        setTimeout(function(){
          setValue();
        },500);
});
    });
    
    
  </script>
  <script type="html/template" id="codetpl">
    var oldArr = [
                {
                    name: "大赛名称",
                    width: "120px",
                    sortable: "true",
                    selectName: "CompetitionName",
                    align: "left",
                    type:'link'
                },
                {
                    name: "赛项年度",
                    width: "120px",
                    sortable: "true",
                    selectName: "Year",
                    align: "left"
                },
               
                {
                    name: "获奖时间",
                    width: "120px",
                    sortable: "true",
                    selectName: "AwardTime",
                    align: "center",
                    fn:function(e){
                     return $.JsonToDateTimeString(e, "yyyy-MM-dd");
                    }
                },
                
            ];
    var list = oldArr.map((t)=>{return {Lable:t.name,Prop:t.selectName}});
  </script>
  <script>
  var oldArr = [
                {
                    name: "大赛名称",
                    width: "120px",
                    sortable: "true",
                    selectName: "CompetitionName",
                    align: "left",
                    type:'link'
                },
                {
                    name: "获奖时间",
                    width: "120px",
                    sortable: "true",
                    selectName: "AwardTime",
                    align: "center",
                    fn:function(e){
                     return $.JsonToDateTimeString(e, "yyyy-MM-dd");
                    }
                },
                
            ];
  //var list = [{ Lable: "姓名", Prop: "Name" }, { Lable: "校内学号", Prop: "StudentNo" }];
	var laycols = ["序号","表单名称","对应字段","控件","占位","默认值","选项","最大值","最小值","是否必填","操作"];
	//var list = oldArr.map((t)=>{return {Lable:t.name,Prop:t.selectName}});
	var code = oldArr.map((t)=>{return `dt.Columns["${t.selectName}"].ColumnName = "${t.name}";`});
	console.log(code.join('\r\n'));
	var laycode = oldArr.map((t)=>{return `{ field: '${t.selectName}', title: '${t.name}', width: 100 },`;})
	console.log(laycode.join('\r\n'));
    var tpl = `
    <el-table :data="tableData" style="width: 100%">
	  {{#list}}
	  <el-table-column prop="{{Prop}}" label="{{Lable}}" width="180"> </el-table-column>
	  {{/list}}
    </el-table>
  `;
  var tplLayForm = `
  {{#list}}
		<label class="col-2 require">{{Lable}}</label>
        <input type="text" class="col-3" id="{{Prop}}" name="{{Prop}}" value="@Model.{{Prop}}">
        <div class="col-1"></div>
	  {{/list}}	
		`;
    
    function setValue(){
      eval(modeleditor.getValue());
    var html = Mustache.render(tpl, { list: list });
      editor.setValue(html + "\n\r" + Mustache.render(tplLayForm, { list: list }));
      
    }
  </script>
  
</body>